<!-- prettier-ignore -->
<template>
  <div class="preview">
    <el-dialog :modal-append-to-body="false" :visible.sync="dialogVisble" title="预览" width="80%">
      <div style="height: 700px">
        <div id="cesiumBox">
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {addLabelLayer, addLayer, addskyLayer, removeLayer} from '@/utils/map';
export default {
  name: 'preview',
  props:{
    show:{
      type:Boolean,
      default:false
    },
    previewUrl: {
      type:Object,
      default:null
    },
    rangeEntity:{
      type:Array,
      default:null
    }
  },
  computed:{
    dialogVisble:{
      get(){
        return this.show
      },
      set(val){
        this.$emit('update:show',val)
      }
    }
  },
  created(){
    this.imageLayer = null
    this.labelLayer = null
    this.defaultImageLayer = null
    this.hgBaseLayer = null
  },
  mounted(){
    this.$nextTick(()=>{
      this.createdMap()
    })
  },
  methods:{
    // 初始化地图
    createdMap() {
      this.viewer = new Cesium.Viewer("cesiumBox", {
        contextOptions: {
          webgl: {
            alpha: true,
            depth: true,
            stencil: true,
            antialias: true,
          },
        },
        useBrowserRecommendedResolution: true,
        selectionIndicator: false,
        homeButton: false,
        animation: false, //是否显示动画控件
        baseLayerPicker: false, //是否显示图层选择控件
        geocoder: false, //是否显示地名查找控件
        timeline: false, //是否显示时间线控件
        sceneModePicker: false, //是否显示投影方式控件
        navigationHelpButton: false, //是否显示帮助信息控件
        infoBox: false, //是否显示点击要素之后显示的信息
        imageryProvider: false,
        fullscreenButton: false,
        shouldAnimate: true,
        requestRenderMode: true,
      });
      this.viewer.scene.primitives.destroyPrimitives = false;
      this.viewer.scene.postProcessStages._fxaa.enabled = true;
      this.viewer.scene.screenSpaceCameraController.enableCollisionDetection = true;
      this.viewer._cesiumWidget._creditContainer.style.display = "none";
      this.viewer.screenSpaceEventHandler.removeInputAction(
        Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
      );

      //指北针
      let options = {};
      // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
      options.defaultResetView = Cesium.Rectangle.fromDegrees(80, 22, 130, 50);
      // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
      options.enableCompass = true;
      // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
      options.enableZoomControls = false;
      // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
      options.enableDistanceLegend = false;
      // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
      options.enableCompassOuterRing = true;
      CesiumNavigation.umd(this.viewer, options);

      this.defaultImageLayer = addskyLayer(this.viewer, 'http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=1fd463af45319bc45b394dac4a87006b');
      this.initBaseMap()
      this.cesiumReady()
      this.initEntity()
      this.viewer.camera.setView({
        destination: Cesium.Cartesian3.fromDegrees(114.87126489570386,30.43532669414297,
          12000
        ),
      })
    },
    initBaseMap(){
      this.hgBaseLayer = addLayer(this.viewer,window.baseMapUrl)
      this.hgBaseLabel = addLabelLayer(this.viewer,window.baseLabelUrl)
      this.screenLayer = addLayer(this.viewer,window.previewUrl)
      this.screenLabel = addLabelLayer(this.viewer,window.previewLabel)
    },
    cesiumReady(){
      console.log(this.previewUrl);
      const cataKeys = Object.keys(this.previewUrl.cataLayers)
      for(let i in this.previewUrl.otherLayers){
        if (!cataKeys.includes(i)){
          const item = this.previewUrl.otherLayers[i]
          if (item.image){
            addLayer(this.viewer,item.image.serviceUrl)
          }
          if (item.label){
            addLabelLayer(this.viewer,item.label.serviceUrl)
          }
        }
      }
      // for(let i in this.previewUrl.cataLayers){
      //   const item = this.previewUrl.cataLayers[i]
      //   if (item.image){
      //     addLayer(this.viewer,item.image.serviceUrl)
      //   }
      //   if (item.label){
      //     addLabelLayer(this.viewer,item.label.serviceUrl)
      //   }
      // }
    },
    initEntity(){
      this.rangeEntity.forEach(item=>{
        if (item.polyline.show){
          this.viewer.entities.add(item.entityOb)
        }
      })
    }
  },
  beforeDestroy() {
    removeLayer(this.viewer,this.defaultImageLayer)
    removeLayer(this.viewer,this.hgBaseLayer)
    removeLayer(this.viewer,this.hgBaseLabel)
    removeLayer(this.viewer,this.screenLayer)
    removeLayer(this.viewer,this.screenLabel)
    this.viewer.entities.removeAll();
    this.handler && this.handler.destroy();
    this.handler = null;
    this.viewer && this.viewer.destroy()
    this.viewer = null
  },
};
</script>

<style lang="less" scoped>
.preview{
  /deep/.el-dialog__wrapper{
    display: flex;
  }
  /deep/.el-dialog{
    margin:auto !important
  }
  #cesiumBox{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 10;
  }
}
</style>